<template>
  <el-dialog :title="dTitle" :visible="visible" width="50%" :before-close="closeDialog">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
      <el-form-item label="标题：" prop="Title">
        <el-input placeholder=" 请输入海报标题" v-model="ruleForm.Title" style="width:70%"></el-input>
      </el-form-item>
      <el-form-item label="预览图：">
        <el-upload
          action="http://gbtest.xiniuauto.com/api/Adm_System/UploadImgFile/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :limit="1"
          :file-list="upLoadData"
          :on-success="uploadSuccess"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <div style="margin:10px 0 0 70px;color:red">建议上传尺寸为560*726像素的图片</div>
      </el-form-item>
      <el-form-item style="margin-left:200px">
        <el-button @click="visible = false">取消</el-button>
        <el-button @click="upload('ruleForm')">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { AddGBPoster } from "@/request/api";
export default {
  data() {
    return {
      importFileUrl: "",
      upLoadData: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      ruleForm: {},
      rules: {
        Title: [
          { required: true, message: "请输入海报标题", trigger: "blur" },
          {
            min: 5,
            max: 50,
            message: "字符长度最小为 5 个字符",
            trigger: "blur",
          }
        ],
      },
    };
  },
  props: {
    dTitle: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    formData(newVal, oldVal) {
      if (newVal) {
        this.ruleForm = { ...newVal };
        this.upLoadData = [];
        this.upLoadData.push({ url: this.ruleForm.PosterUrl });
      }
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.ruleForm = this.formData;
    });
  },
  methods: {
    upload() {
      this.$refs["ruleForm"].validate(async (vali) => {
        console.log("vali:" + vali);
        if (vali) {
      AddGBPoster(this.ruleForm)
        .then((res) => {
          if (res.StatusCode === 200) {
            this.$parent.getTableDatas();
            this.$confirm("该条信息发布成功！", "发布成功", {});
          }
        })
        .catch((err) => {
          console.log(err);
        });
        }
      })
    },
    uploadSuccess(response, file, fileList) {
      if (response.StatusCode === 200) {
        this.ruleForm.PosterUrl = response.OtherData + response.Data.DefaultUrl;
      }
    },
    // 上传错误
    uploadError(response, file, fileList) {
      console.log("上传失败，请重试！");
    },
    closeDialog(reload) {
      //子传父
      this.$emit("closeDialog", reload);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="less" scoped>
</style>